<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
	</head>
	<body>

		<div id="app">
			<p><input type="text" placeholder="请输入名字" v-model="keyword" />
				<input type="button" value="升序" @click="sorTye=1">
				<input type="button" value="降序" @click="sorTye=2" />
				<input type="button" value="原顺序" @click="sorTye=0" />
			</p>
			<ul>
				<li v-for="(item,index) of personsarr" :key="item.id">
					{{item.name}}-{{item.age}}--{{index}}
					<input type="text"/>
				</li>
			</ul>
		</div>
		<script src="../vue.js"></script>
		<script>
			var app = new Vue({
				el: '#app', //Id #id class .name  标签 div
				//输出的数据
				data: function() {
					return {
						sorTye: 0, //用于控制排序
						keyword: "", //输入框内容
						persons: [{ //列表数据
								id: '001',
								name: "马冬梅",
								age: 55,
								sex: "女"
							},
							{
								id: '002',
								name: "周冬雨",
								age: 19,
								sex: "女"
							},
							{
								id: '003',
								name: "周杰伦",
								age: 20,
								sex: "男"
							},
							{
								id: '004',
								name: "马吴伦",
								age: 77,
								sex: "男"
							},
						],


					}
				},
				//页面刷新时立刻执行的代码
				mounted: function() {},
				//对象 方法
				methods: {},
				//计算属性
				computed: {
					personsarr() {
						const arr = this.persons.filter((p) => {
							return p.name.indexOf(this.keyword) !== -1
						})
						//判断是否需要排序
						if (this.sorTye) {
							arr.sort((p1, p2) => {
								return this.sorTye == 1 ? p2.age - p1.age : p1.age - p2.age
							})
						}
						return arr
					}
				},
				//监视属性
				watch: {

				},
			});
		</script>
	</body>
</html>
